import React from 'react';
import './css/Login.css';
import Header from './templates/Header';
import { Card } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';


class LoginButton extends React.Component{
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = { isLoading: false }
    }

    handleClick() {
        this.setState({isLoading: true});

        // This probably where you would have an `ajax` call
        setTimeout(() => {
        // Completed of async action, set loading state back
        this.setState({isLoading: false});
        }, 2000);
    }

    render() {
        let isLoading = this.state.isLoading;
        return (
            <Button
                bsStyle="primary"
                disabled={isLoading}
                onClick={!isLoading ? this.handleClick : null}>
                {isLoading ? 'Loging...' : 'Login'}
            </Button>
        );
    }
}

const App = () => {
  return (
    <div className="login-app-container">
      <Header />
      <div className="login-content">
        <div><span className="login-font-size2">Company name</span></div>
        <div><span className="login-font-size4">System name</span></div>
        <div className="form-group">
            <div className="col-sm-20">
                <label htmlFor="username">ID :</label>
                <input type="text" id="username" className="form-control" placeholder="Enter your ID" />
            </div>
            <div className="col-sm-20">
                <label htmlFor="password">PWD:</label>
                <input type="password" id="password" className="form-control" placeholder="Enter your password" />
                &nbsp;<LoginButton />
            </div>
        </div>
        <div className="login-footer">
            <ul>
                <li><Link to="/app">next</Link></li>
            </ul>
        </div>
        

        <Card className='login-notice-card arounded'>
            <Card.Title>Notice</Card.Title>
            <Card.Body>
                XxXXXXXXXXXXXXXXXXXXXXXXXXXXX
                <br />
                XXXXXXXXXSSSS
            </Card.Body>
        </Card>
      </div>
    </div>
  );
};
export default App;